<!DOCTYPE HTML>
   <html>
       <head>
           <meta charset="gb2312" charset="utf-8">
           <title>记事本</title>
           <script type="text/javascript" src="../js/jquery.js"></script>
           <style type="text/css">
           *{margin:0; padding:0;}
           body,input{font-size:14px; line-height:24px; color:#333; font-family:Microsoft yahei, Song, Arial, Helvetica, Tahoma, Geneva;}
           h1{margin-bottom:15px; height:100px; line-height:100px; text-align:center; font-size:24px; color:#fff; background:black;}
          #content #post,#comment p{zoom:1;}
          #content #post:after,#comment p:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
          .transition{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;}
          #content{margin:0 auto; width:960px; overflow:hidden;}
          #content #post{margin-bottom:15px; padding-bottom:15px; border-bottom:1px #d4d4d4 dashed;
                   height: 336px;
               }
          #content #post textarea{display:block; margin-bottom:10px; padding:5px; width:948px; height:190px; border:1px #d1d1d1 solid; border-radius:5px; resize:none; outline:none;}
          #content #post textarea:hover{border:1px #9bdf70 solid; background:#f0fbeb;}
          #content #post #postBt,#content #post #clearBt{margin-left:5px; padding:3px; float:right;}
          #comment{overflow:hidden;}
          #comment p{margin-bottom:10px; padding:10px; border-radius:5px;}
         #comment p:nth-child(odd){border:1px solid #e3e197; background:#ffd;}
          #comment p:nth-child(even){border:1px solid #adcd3c; background:#f2fddb;}
          /*#comment p span{display:inline; float:left;}*/
          #comment p .right{text-align:right;}
          #comment p .msg{width:738px;}
          #comment p .datetime{width:200px; color:#999; text-align:right;}



          </style>
         <script type="text/javascript">
             var num=1;
             var named;
             var Id;
             let dataHtml = "",data = "";

             function prom() {
                $.ajax({
			
                      type: "post",				
                      url: "/text/getUserName",			//请求地址******************************************************************************要填
                      async:true,
                      dataType:"json",//返回类型
                      xhrFields:{
                            withCredentials:true,
                     },
                    crossDomain: true,
                    success: function (result) {
                        named = result.name;
                        Id=result.id;
                        document.getElementById("ritian").value = result.name+" "+result.id;
                    }//时间，内容，名字

          
               });
                
             }

             

          var Storage =
          {
            getDateTime:function()//获取日期时间，例如 2012-03-08 12:58:58
              {
                  var isZero = function(num)//私有方法，自动补零
                  {
                      if(num < 10)
                     {
                          num = "0" + num;
                      }
                      return num;
                  }
                  
                  var d = new Date();
                  return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
              },

              Data:function()//保存数据库数据
              {

                
    
                     // var data = document.querySelector("#post textarea");
                      $.ajax({

			                type: "post",
			                url: "/text/getAllText",			//请求地址******************************************************************************要填
			                async:false,
			                dataType:"json",//返回类型
			                xhrFields:{
				                withCredentials:true,
			                },
			                crossDomain: true,
			                success: function (result) {
                                  //alert(result.length);

                                  for(let i=result.length-1;i>=0;i--){
                                      //var time=JSON.stringify(result[i].dateTime);
                                      //var time = new Date().getTime() + Math.random() * 5;
                                      var dateTime = result[i].dateTime;
                                      var day;
                                      if(dateTime.year%4==0&&dateTime.year%100!=0) {
                                          if (dateTime.monthValue == 1) day = dateTime.dayOfYear;
                                          else if (dateTime.monthValue == 2) day = dateTime.dayOfYear - 31;
                                          else if (dateTime.monthValue == 3) day = dateTime.dayOfYear - 60;
                                          else if (dateTime.monthValue == 4) day = dateTime.dayOfYear - 91;
                                          else if (dateTime.monthValue == 5) day = dateTime.dayOfYear-121;
                                          else if (dateTime.monthValue == 6) day = dateTime.dayOfYear-152;
                                          else if (dateTime.monthValue == 7) day = dateTime.dayOfYear-182;
                                          else if (dateTime.monthValue == 8) day = dateTime.dayOfYear-213;
                                          else if (dateTime.monthValue == 9) day = dateTime.dayOfYear-244;
                                          else if (dateTime.monthValue == 10) day = dateTime.dayOfYear-274;
                                          else if (dateTime.monthValue == 11) day = dateTime.dayOfYear-305;
                                          else if (dateTime.monthValue == 12) day = dateTime.dayOfYear-335;
                                      }
                                      else{
                                          if (dateTime.monthValue == 1) day = dateTime.dayOfYear;
                                          else if (dateTime.monthValue == 2) day = dateTime.dayOfYear - 31;
                                          else if (dateTime.monthValue == 3) day = dateTime.dayOfYear - 59;
                                          else if (dateTime.monthValue == 4) day = dateTime.dayOfYear - 90;
                                          else if (dateTime.monthValue == 5) day = dateTime.dayOfYear-120;
                                          else if (dateTime.monthValue == 6) day = dateTime.dayOfYear-151;
                                          else if (dateTime.monthValue == 7) day = dateTime.dayOfYear-181;
                                          else if (dateTime.monthValue == 8) day = dateTime.dayOfYear-212;
                                          else if (dateTime.monthValue == 9) day = dateTime.dayOfYear-243;
                                          else if (dateTime.monthValue == 10) day = dateTime.dayOfYear-273;
                                          else if (dateTime.monthValue == 11) day = dateTime.dayOfYear-304;
                                          else if (dateTime.monthValue == 12) day = dateTime.dayOfYear-334;
                                      }
                                      var hour=dateTime.hour;
                                      if(hour<10)hour="0"+dateTime.hour;
                                      var minute=dateTime.minute;
                                      if(minute<10)minute="0"+dateTime.minute;
                                      var second=dateTime.second;
                                      if(second<10)second="0"+dateTime.second;
                                      var Time = dateTime.year+"-"+dateTime.monthValue+"-"+day+"  "+hour +":"+ minute+":"+second;
                                      //localStorage.setItem(JSON.stringify(num), result[i].text+ "|" +result[i].name+"|"+Time);

                                      dataHtml += "<span style=>" + result[i].name +"  "+ result[i].id  + "<span style=\"float:right\">" + Time + "</span><p><span class=\"msg\">" + result[i].text + "<input style=\"float:right;border:none;border-radius:5px;\" id=\"clearBt\" type=\"button\"  value=\"\"/>" + "</span></p>";
                                      //num++;

                                  }//时间，内容，名字
                                document.getElementById("comment").innerHTML = dataHtml;
			                },
			         });
                    
              },//数据库读取信息
            
            
              saveData:function()//保存数据
              {
    
                      var data = $("#test").val();


                  if(data.value != "")
                  {
                      //var time = new Date().getTime() + Math.random() * 5;
                      if (named) {
                          let hat = "";
                          hat += "<span style=>" +named +"  "+ Id  + "<span style=\"float:right\">" + this.getDateTime() + "</span><p><span class=\"msg\">" + JSON.stringify(data) + "<input style=\"float:right;border:none;border-radius:5px;\" id=\"clearBt\" type=\"button\"  value=\"\"/>" + "</span></p>";
                          dataHtml=hat+dataHtml;
                          document.getElementById("comment").innerHTML = dataHtml;
                          $.ajax({
			
			                type: "post",				
			                url: "/text/insertText",			//请求地址******************************************************************************要填
			                data:JSON.stringify(
				                 data
			                ),
			
			               async:true,
			               dataType:"json",//返回类型
                           contentType:'application/json',
			               xhrFields:{
				           withCredentials:true,
			               },
			               crossDomain: true,
			
			
			               success: function (result) {
				            
				
				               if (result.success) {
					               alert("success");
				               } 
                            },
			
			
			 
				  
			             });
                      }


                      $("#test").val("");

                  }
                  else
                  {
                      alert("请填写您的留言！");
                 }
              },





                       
          }
          
          window.onload = function()//页面自启
          {  

              prom();
              
            
              Storage.Data();//读取数据库留言

              document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件，作用是将localStorage中的数据输出
            
          }





          </script>
      </head>
      
      <body>
         <br>

          <div id="content">
              <div id="post">
                  <div style="background:#3EADC5 ;height:30px;">
                      昵称：<input type="text" id="ritian" name="Submit3" style="border:none; background-color:#3EADC5; color:white;" disabled="disabled" >
                      
                      <!--disabled="disabled"-->
                  </div>
                  <div>
                  <textarea class="transition" id="test"></textarea>
                      </div>
                  <input id="postBt" type="button" style="border:none; background-color:#3EADC5; color:white;border-radius:5px; width:80px; height:30px;" value="发表留言"/>
                 
             </div>
             <div id="comment"></div>
              </div>
          </body>
 </html>